<template>
  <div>
    <div class="box">
      <!-- 筛选查询 -->
      <div class="list">
        <div>
          <img
            class="list-img"
            src="../../../assets/images/搜索小.png"
            alt=""
          />
        </div>
        <div>
          筛选查询
        </div>
      </div>
      <div class="search">
        <div class="search">
          <div style="display: flex;">
            <div class="whead">
              <div class="left">水库名称 :</div>
              <el-select
                v-model="staty"
                placeholder="全部"
                @change="statusChange(staty)"
              >
                <el-option
                  v-for="item in options"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                >
                </el-option>
              </el-select>
            </div>
            <div>
              <el-button type="primary" @click="btnSearch">搜索</el-button>
            </div>
            <div style="margin-left: 10px;">
              <el-button type="primary" @click="dialogFormVisibles()"
                >添加保单</el-button
              >
            </div>
          </div>
        </div>
        <div>
          <el-dialog
            :title="title"
            :visible.sync="dialogFormVisible"
            @close="closeClick"
          width="25%"
          >
            <div >
              <el-form :model="form">

                <el-form-item label="水库名称" :label-width="formLabelWidth">
                  <el-select v-model="form.id" style="width: 240px;">
                    <el-option
                      v-for="item in optes"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="保单期限" :label-width="formLabelWidth">
                  <el-date-picker
                    v-model="form.timeInfo"
                    @change="timeChange(form.timeInfo)"
                    style="width: 240px;"
                    prefix-icon="el-icon-time"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="申请时间"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-divider></el-divider>

                <div style="margin-left: 120px; ">
                  <div style="font-weight: 700;">
                    保单文件:
                  </div>
                  <el-form>
                    <el-form-item prop="file">
                      <el-upload
                        class="upload-demo"
                        ref="upload"
                        multiple
                        action=""
                        :http-request="httpRequest"
                        :auto-upload="false"
                        :on-remove="handleRemove"
                        :before-upload="beforeAvatarUpload"
                        :show-file-list="false"
                        :on-preview="handlePictureCardPreview"
                      >
                        <el-button slot="trigger" size="small" type="primary"
                          >选取文件</el-button
                        >
                        <el-button
                          style="margin-left:5px"
                          size="small"
                          type="primary"
                          @click="submitUploadList"
                          >上传
                        </el-button>
                      </el-upload>
                      <div v-if="filesData">
                        <div>{{ filesData }}</div>
                      </div>
                    </el-form-item>
                  </el-form>
                </div>
              </el-form>
              <el-divider></el-divider>
              <div slot="footer" class="dialog-footer">
                <span >
                  <el-button type="primary" @click="addfish"
                    >确定</el-button
                  >
                </span>
               

                <el-button @click="dialogFormVisible = fsalse">取 消</el-button>
              </div>
            </div>
          </el-dialog>
        </div>
      </div>
      <!-- 数据列表 -->
      <div class="list">
        <div>
          <img
            class="list-img"
            src="../../../assets/images/查询数据列表.png"
            alt=""
          />
        </div>
        <div>
          数据列表
        </div>
      </div>
      <div>
        <!-- 表格 -->
        <el-table border :data="listData" style="width: 100%" align="center">
          <el-table-column
            prop="reservoirName"
            label="水库名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="fishPartyPolicy"
            label="保单文件"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="effectiveDate"
            label="保单生效日期"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="expirationDate"
            label="保单到期期限"
            align="center"
          ></el-table-column>

          <el-table-column fixed="right" label="操作" align="center">
            <template slot-scope="scope">
              <div class="slot">
                <el-button
                  type="primary"
                  size="small"
                  @click="editClick(scope.row.id)"
                  >编辑</el-button
                >
                <el-button
                  type="danger"
                  size="small"
                  @click="removeClick(scope.row.id)"
                  >删除</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <div class="block" style="margin-top:15px; ">
          <el-pagination
            align="center"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  fishPartyPolicySave,
  uploadFileToOss,
  fishPartyPolicyRemove,
  fishPartyPolicy,
  reservoir
} from "@/api/user";
import { Toast } from "vant";
export default {
  data() {
    return {
      show: false,
      shows: false,
      id: "", //鱼苗id
      filesData: "", //保单文件名
      fileData: [],
      dialogVisible: false,
      fishgrow: [{ weight: 0.5, speed: 0 }],
      dialogVisible: false,
      input: "", //搜索
      fishName: "", //鱼苗名称搜索
      principal: "", //负责人搜索
      city: "", //城市搜索
      staty: "", //水库状态
      orderBeginDate: "",
      orderEndDate: "",
      loading: false,
      selectedAssetsList: [], // 该数组对象
      assetsUidList: [], // 下标值
      currentPage: 1, //当前页数
      pageSize: 10, //每页条数
      total: 0, //总条目数
      listData: [],
      enableStatus: "", //	启用状态 0.启用 1.禁用
      fryName: "", //鱼苗名称
      fryNo: "", //鱼苗编号
      dialogFormVisible: false,
      form: {
        name: "",
        introduce: "",
        timeInfo: [],
        weight: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        id: ""
      },

      formLabelWidth: "120px",
      form: {
        code: "",
        name: ""
      },
      value: "",
      options: [],
      optes: [],
      nameInfo: "", //鱼苗名称
      reservoirId: "", //水库ID
      title: "添加保单",
      id: 0
    };
  },
  created() {
    this.fryInfo(this.pageSize, this.currentPage);
    this.reservoirList();
  },
  methods: {
    // 水库列表
    async reservoirList() {
      let data = {
        enableStatus: -1,
        limit: -1,
        page: 1
      };
      let result = await reservoir(data);
      if (result.code == 0) {
        let lintInfo = result.data.records;
        lintInfo.forEach(item => {
          this.options.push({ name: item.name, code: item.id });
        });
        lintInfo.forEach(item => {
          this.optes.push({ name: item.name, code: item.id });
        });
      }
    },
    async httpRequest(param) {
      let fileObj = param.file; // 相当于input里取得的files
      let formData = new FormData(); // FormData 对象
      formData.append("file", fileObj); // 文件对象
      let result = await uploadFileToOss(formData);
      if (result.code == 0) {
        this.filesData = result.data;
      }
    },
    submitUploadList() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      this.filesData = "";
    },
    handlePictureCardPreview(file) {
      this.filesData = file.name;
      this.dialogVisible = true;
    },
    //   限制视频大小
    beforeAvatarUpload(file) {
      console.log("file===", file);
      var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      console.log("testmsg===", testmsg);
      // .jpg,.jpeg,.png,.pdf,.PDF
      const extension1 = testmsg === "txt";
      const extension2 = testmsg === "wps";
      const extension3 = testmsg === "xls";
      const extension4 = testmsg === "pdf";
      const extension5 = testmsg === "PDF";
      const extension6 = testmsg === "doc";
      const extension7 = testmsg === "docx";
      const extension8 = testmsg === "xlsx";
      if (
        !extension1 &&
        !extension2 &&
        !extension3 &&
        !extension4 &&
        !extension5 &&
        !extension6 &&
        !extension7 &&
        !extension8
      ) {
        this.$message({
          message:
            "上传文件只能是.txt,.wps,.xls,.pdf,.PDF,.doc,.docx,.xlsx格式!",
          type: "warning"
        });
        return false;
      } else {
        return true;
      }
    },
    //删除
    async removeClick(e) {
      this.$confirm('此操作删除默认水库, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then( async () => {
          let data = {
            id: e
      };
      let result = await fishPartyPolicyRemove(data);
      if (result.code == 0) {
        Toast.success("删除成功");
        this.fryInfo(this.pageSize, this.currentPage);
      } else {
        Toast.fail("删除失败");
      }
       
         
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    
    },
    // 编辑
  editClick(e) {
      this.id = e;
      this.title = "编辑表单";
      this.show = false;
      this.shows = true;
      this.dialogFormVisible = true;
      this.listData.forEach(item=>{
        if(item.id==e){
            this.filesData = item.fishPartyPolicy
        this.form.id = item.reservoirId
        this.form.timeInfo=[item.effectiveDate,item.expirationDate]
      this.orderBeginDate=item.effectiveDate,
     this.orderEndDate=item.expirationDate
        }
       
        
      })
    
    },
    // 添加按钮
    dialogFormVisibles() {
      this.show = true;
      this.shows = false;
      this.dialogFormVisible = true;
    },

    // 添加/编辑保单
    async addfish(e) {
  
      let data = {
        effectiveDate: this.orderBeginDate + " 00:00:00",
        expirationDate: this.orderEndDate + " 23:59:59",
        fishPartyPolicy: this.filesData,
        id: this.id,
        reservoirId: this.form.id
      };
    
      let result = await fishPartyPolicySave(data);
      if (result.code == 0) {
        this.fryInfo();
        this.dialogFormVisible = false;
        setTimeout(() => {
          Toast.success(result.message);
        }, 1000);
      }
    },
    // 时间选择
    timeChange(e) {
      if (e) {
        this.orderBeginDate = e[0];
        this.orderEndDate = e[1];
      } else {
        this.orderBeginDate = "";
        this.orderEndDate = "";
      }
     
   
    },

    async fryInfo(limit, page) {
      let params = {
        limit: this.pageSize,
        page: this.currentPage,
        reservoirId: this.reservoirId
      };
      let result = await fishPartyPolicy(params);
     
      if (result.code == 0) {
        this.listData = result.data.records;
        this.pageSize = result.data.limit;
        this.total = result.data.total;
     
        //   result.data.records.forEach(element => {
        //     this.options.push({ name: element.name, code: element.cityCode });
        //   });
      }
    },
    // 关闭对话框时触发
    closeClick() {
      this.form.timeInfo = "";
     this.form.id = "";
      this.filesData = "";
      this.orderBeginDate = "";
        this.orderEndDate = "";
    },
   
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.fryInfo(this.pageSize, this.currentPage);
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fryInfo(this.pageSize, this.currentPage);
    },

    // 状态搜索
    statusChange(e) {
      this.reservoirId = e;
      this.fryInfo(this.pageSize, this.currentPage);
    },
    // 搜索按钮
    btnSearch(e) {
      this.fryInfo(this.pageSize, this.currentPage);
    }
  }
};
</script>

<style lang="scss" scoped>
.dialog-footer {
  text-align: center;
}
::v-deep .el-dialog {
  position: relative;
  margin: 0 auto 0px;
  background: #ffffff;
  border-radius: 2px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 50%;
  // height: 80%;
}
::v-deep .el-dialog__body {
  border-top: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  max-height: 85% !important;
  min-height: 80%;
  overflow-y: auto;
  //如需设置滚动条样式
  &::-webkit-scrollbar {
    width: 2px;
    background-color: #ccc;
  }
  &::-webkit-scrollbar-thumb {
    background-color: #0ae;
  }
  &::-webkit-scrollbar-track {
    background-color: #ccc;
  }
}
.box {
  border: 1px solid #ccc;
  width: 98%;
  margin: 10px auto;
}
.left {
  margin-right: 10px;
}
::v-deep .el-dialog__footer {
  padding: 10px 20px 20px;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

::v-deep .search[data-v-1c1a5e1d] {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  line-height: 80px;
  margin: 0 20px;
}

::v-deep .el-upload-list--picture .el-upload-list__item {
  overflow: hidden;
  z-index: 0;
  background-color: #fff;
  border: 1px solid #c0ccda;
  border-radius: 6px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-top: 10px;
  padding: 10px 10px 10px 90px;
  height: 92px;
  width: 100px;
}

::v-deep .el-dialog__header {
  padding: 20px 20px 10px;
  text-align: center;
}

.list {
  display: flex;
  align-items: center;
  padding-left: 20px;
  height: 50px;
  background-color: #f3f3f3;
  color: #666;

  .list-img {
    width: 20px;
    height: 20px;
  }
}

::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #1abc9c !important;
  color: #fff;
}

.search {
  // display: flex;
  align-items: center;
  // height: 80px;
  line-height: 80px;
  margin: 0 20px;
}

.whead {
  width: 400px;
  display: -webkit-box;
}
</style>
